<template>
    <div>
        <van-nav-bar left-arrow @click-left="$router.back()">
            <template #title>
                <van-search v-model="keyword" placeholder="请输入搜索关键词" style="padding: 0;">
                </van-search>
            </template>
            <template #right>
                <div @click="searchHandler(keyword as string, '66')">搜索</div>
            </template>
        </van-nav-bar>

        <div class=" box search-history-box">
            <div class="top">
                <p>最近搜索</p>
                <van-icon name="delete-o" size="18" @click="clickClearHanlder" />
            </div>
            <ul class="bottom">
                <li v-for="item in historyList" :key="item.id" @click="searchHandler(item.keyword, '66')">{{ item.keyword }}
                </li>
            </ul>
        </div>

        <div class="box search-hot-box">
            <div class="top">
                <p>热门搜索</p>
            </div>
            <div class="bottom">
                <ul>
                    <li v-for="(item, index) in hotList" :key="index" :class="{ active: item.is_hot == 1 }"
                        @click="searchHandler(item.keyword, '66')">{{ item.keyword
                        }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getSearchApi, getSearchClickApi, getSearchClickClearApi } from '@/api/search'
import { useRouter } from 'vue-router';
// 搜索框双向绑定的数据
const keyword = ref<string>()
// 历史搜索的数据
const historyList = ref<SearchNs.IhistoryData[]>([])
// 热门搜索的数据
const hotList = ref<SearchNs.IhotKeywordList[]>([])
// 准备一个变量, 装搜索历史列表
const searchHistoryList = ref<string[]>([])

const $router = useRouter()
// 请求页面数据的方法
const searchList = async () => {
    const res = await getSearchApi('66')
    historyList.value = res.historyData
    hotList.value = res.hotKeywordList
}

//  点击热门搜索内内容 点击历史搜索内内容 点击搜索框边上的 搜索按钮)
const searchHandler = (word: string, id: string) => {
    const res = getSearchClickApi(word, id)
    // 向 searchChangeHandler 添加关键字
    searchHistoryList.value.unshift(word)
    // 要对搜索列表去重
    searchHistoryList.value = [...new Set(searchHistoryList.value)]
    // 把搜索的关键字内容存储到 localStorage 内
    window.localStorage.setItem('history', JSON.stringify(searchHistoryList.value))

    // 跳转路由
    $router.push('/list')
}
// 点击清除按钮
const clickClearHanlder = async () => {
    const res = await getSearchClickClearApi('66')
    searchList()
}
onMounted(() => {
    searchList()
})
</script>

<style scoped lang="scss">
.box {
    width: 100%;
    margin-bottom: 15px;
    background-color: #fff;

    &.hidden {
        display: none;
    }

    >.top {
        display: flex;
        justify-content: space-between;
        height: 20px;
        align-items: center;
        padding: 10px 20px;

        p:last-child {
            font-size: 14px;
            color: #666;
        }
    }

    >.bottom {
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 0 20px;

        >ul {
            display: flex;
            flex-wrap: wrap;
        }

        li {
            padding: 2px 5px;
            border: 1px solid #b8b6b6;
            ;
            color: #686868;
            font-size: 12px;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        >p {
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #ccc;
            width: 100%;
        }

        .active {
            border: 1px solid #8f0707;
        }
    }
}
</style>